<template>
  <div v-loading="loading">
    <!-- 维护邮箱-->
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <div class="area-header">
          <span class="area-header-title">{{ $t('填写方信息') }}</span>
        </div>
        <el-col :span="24">
          <el-form-item :label="$t('名称')" prop="name">
            <el-input v-model="form.name" show-word-limit maxlength="200" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('邮箱')" prop="email">
            <el-input v-model="form.email" show-word-limit maxlength="200" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="area-header" style="margin-top: 25px">
            <span class="area-header-title">{{ $t('审核方信息') }}</span>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('项目角色')" prop="role">
            <el-select v-model="form.role" @change="changeRole(); form.userId = ''; userEmailErrorMsg = ''">
              <el-option
                v-for="dict in roleOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('审核人')" prop="userId">
            <UserSelect
              v-if="form.role === 'other'"
              v-model="form.userId"
              :placeholder="$t('用户名称')"
              @change="userEmailErrorMsg = ''"
            />
            <el-select v-else v-model="form.userId" @change="checkUserEmail">
              <el-option
                v-for="dict in userOptions"
                :key="dict.id"
                :label="$t(dict.user.nickName)"
                :value="dict.userId"
              />
            </el-select>
            <div style="color: orange;font-size: 13px;">{{ userEmailErrorMsg }}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <div style="display: inline-flex;margin: 0 !important;">
        <el-button @click="cancel">{{ $t('取消') }}</el-button>
        <el-button type="primary" @click="submitForm">{{ $t('确定') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import { listDealTeam } from '@/api/deal/team/dealTeam'
import { updateDealIndicatorEmail } from '@/api/deal/indicator/email/dealIndicatorEmail'

export default {
  name: 'DealIndicatorDataEmail',
  data() {
    const checkEmail = (rule, value, callback) => {
      if (value === '' || value === undefined || value === null) {
        callback(new Error(this.$t('请正确填写邮箱')))
      } else {
        const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        if (!reg.test(value)) {
          callback(new Error(this.$t('请输入有效的邮箱')))
        } else {
          callback()
        }
      }
    }
    return {
      // 表单参数
      form: {
        id: undefined,
        name: undefined,
        email: undefined
      },
      // 遮罩层
      loading: false,
      // 表单校验
      rules: {
        name: [{ required: true, message: this.$t('必填信息'), trigger: 'change' }],
        email: [{ required: true, validator: checkEmail, trigger: 'change' }]
      },
      roleOptions: [],
      userOptions: [],
      userEmailErrorMsg: ''
    }
  },
  watch: {
  },
  created() {
    this.getDicts('deal_team_role').then(response => {
      this.roleOptions = response.data
      this.roleOptions.push({ dictLabel: '外部人员', dictValue: 'other' })
    })
  },
  methods: {
    init(data) {
      if (data) {
        this.form.id = data.id
        this.form.name = data.name
        this.form.email = data.email
        this.form.role = data.role === undefined ? 'F' : data.role
        this.form.userId = data.userId
        this.changeRole(true)
      }
    },
    cancel() {
      this.$parent.$parent.emailOpen = false
    },
    changeRole(isInit) {
      listDealTeam({ dealId: this.$route.query.id, role: this.form.role, leave: 'N' }).then(response => {
        this.userOptions = response.rows
        if (isInit) {
          this.checkUserEmail()
        }
      })
      this.$forceUpdate()
    },
    // 校验选中的审核人是否维护了邮箱
    checkUserEmail() {
      this.$forceUpdate()
      this.userEmailErrorMsg = ''
      const obj = this.userOptions.find(object => this.form.userId === object.user.userId)
      if (obj) {
        if (obj.user.email === undefined || obj.user.email === null || obj.user.email === '') {
          this.userEmailErrorMsg = this.$t('未发现邮箱') + ',' + this.$t('请前往维护,否则可能无法收到填报人提交通知!')
        }
      }
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.isEmpty(this.form.id)) {
            console.log('新增邮箱操作')
            this.$emit('sendEmail', { id: this.form.id, name: this.form.name, email: this.form.email, role: this.form.role, userId: this.form.userId })
            this.cancel()
          } else {
            console.log('修改邮箱操作')
            this.loading = true
            updateDealIndicatorEmail({ id: this.form.id, name: this.form.name, email: this.form.email, role: this.form.role, userId: this.form.userId }).then(() => {
              this.$emit('sendEmail', { id: this.form.id, name: this.form.name, email: this.form.email, role: this.form.role, userId: this.form.userId })
              this.$message({ showClose: true, duration: 6000, message: this.$t('操作成功,当填报人邮箱发生变化,填报链接将会失效,请留意!'), type: 'success' })
              this.cancel()
            }).catch(() => {
              this.msgError('error')
              this.loading = false
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
